<template>
  <div>
    <div class="dowebok">
      <div class="form sign-in">
        <h2>欢迎回来</h2>
        <el-form ref="loginForm" :rules="loginRules" :model="user">
          <label>
            <el-form-item prop="phone">
              <el-input class="loginInput"
                        style="margin-top: 50px;" type="text" v-model="user.phone" placeholder="手机号"/>
            </el-form-item>

          </label>
          <label>
            <el-form-item prop="password">
              <el-input class="loginInput"
                        type="password" v-model="user.password" placeholder="密码"/>
            </el-form-item>
          </label>
        </el-form>

        <!--        <p class="forgot-pass"><a href="javascript:">忘记密码？</a></p>-->
        <button type="button" class="submit" @click="userLogin()">登 录</button>
        <button type="button" class="fb-btn" onclick="window.location.href='/web/index'">
          <!-- 使用 <span>QQ</span> 帐号登录 -->
          返 回
        </button>
      </div>
      <div class="sub-cont">
        <div class="img">
          <div class="img__text m--up">
            <h2>还未注册？</h2>
            <p>立即注册，发现大量机会！</p>
          </div>
          <div class="img__text m--in">
            <h2>已有帐号？</h2>
            <p>有帐号就登录吧，好久不见了！</p>
          </div>
          <div class="img__btn">
            <span class="m--up">注 册</span>
            <span class="m--in">登 录</span>
          </div>
        </div>
        <div class="form sign-up">
          <h2>立即注册</h2>
          <el-form  ref="registerForm" :rules="registerRules" :model="register">
            <label>
              <el-form-item prop="phone">
                <el-input class="loginInput"
                          style="margin-top: 50px;" type="text" v-model="register.phone" placeholder="手机号"/>
              </el-form-item>

            </label>
            <label>
              <el-form-item prop="password">
                <el-input class="loginInput" type="password"  v-model="register.password"
                          placeholder="输入密码"/>
              </el-form-item>

            </label>
            <label>
              <el-form-item prop="secondPassword">
                <el-input class="loginInput" type="password"  v-model="register.secondPassword"
                          placeholder="再次输入密码"/>
              </el-form-item>
            </label>
          </el-form>


          <button type="button" class="submit" @click="userRegister()">注 册</button>
          <button type="button" class="fb-btn" onclick="window.location.href='/web/index'">
            <!-- 使用 <span>QQ</span> 帐号登录 -->
            返回
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {setToken} from "@/util/token";
import {MessageBox} from 'element-ui';

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      }else {
        if (this.register.secondPassword !== '') {
          this.$refs.registerForm.validateField('secondPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value !== this.register.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    var validatePassPhone = (rule, value, callback) => {
      const regExp = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
      if (!regExp.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }

    };
    return {
      backUsername: "",
      regUsername: "",
      register: {
        phone: "",
        password: "",
        secondPassword: "",
      },


      user: {
        phone: "",
        password: "",
      },

      loginRules: {
        phone: [
          {validator: validatePassPhone, trigger: 'blur'}
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
        ],
      },

      registerRules: {
        phone: [
          { validator: validatePassPhone, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        secondPassword: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      },


    };
  },


  methods: {

    userRegister() {
      this.$refs["registerForm"].validate((valid) => {
            if (valid) {
              this.register.phone = this.register.phone.trim();
              this.register.password = this.register.password.trim();
              this.register.secondPassword = this.register.secondPassword.trim();
              this.axios.post("/user/user-register", {
                phone:this.register.phone,
                password:this.register.password
              }).then(({data}) => {
                if(data.state == 20000){
                  this.$message.success(data.message);
                  setToken('cecFrontToken', data.data)
                  window.location.href = "/web"

                }else{
                  this.$message.error(data.message);
                }
              })
            }else {
                this.$message.error("提交失败");
                return false;
              }
            })

    },

    userLogin() {
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          window.localStorage.removeItem("cecFrontToken")
          this.user.phone = this.user.phone.trim();
          this.user.password = this.user.password.trim();

          this.axios.post("/user/login", this.user)
              .then(({data}) => {
                if (data.state == 20000) {
                  this.$message.success('登录成功');

                  setToken('cecFrontToken', data.data)
                  window.location.href = "/web"

                  // console.log("返回回来的JWT:")
                  // console.log(data.data);
                } else if (data.state == 40800) {
                  if (data.message == '用户已失效') {
                    this.$message.error("用户已被禁用");
                  } else {
                    this.$message.error(data.message);
                  }

                }
              });

        } else {
          this.$message.error("提交失败");
          return false;
        }
      })

    },

  },
  mounted: function () {
    document.querySelector('.img__btn').addEventListener('click', function () {
      document.querySelector('.dowebok').classList.toggle('s--signup')
    })
  }
}
</script>


<style>
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  /* background-image: url(../assets/images/loginBg.jpeg); */
  background: url(/public/loginBg.jpg);
  background-size: cover;
}

input,
button {
  border: none;
  outline: none;
  background: none;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.tip {
  font-size: 20px;
  margin: 40px auto 50px;
  text-align: center;
}

.dowebok {
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 900px;
  height: 550px;
  margin: -300px 0 0 -450px;
  background: #fff;
  border-radius: 10px;
}

.form {

  position: relative;
  width: 640px;
  height: 100%;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  padding: 50px 30px 0;
}

.sub-cont {

  overflow: hidden;
  position: absolute;
  left: 640px;
  top: 0;
  width: 900px;
  height: 100%;
  padding-left: 260px;
  background: #fff;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

.dowebok.s--signup .sub-cont {
  -webkit-transform: translate3d(-640px, 0, 0);
  transform: translate3d(-640px, 0, 0);
}

button {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 36px;
  border-radius: 30px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.img {
  overflow: hidden;
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 260px;
  height: 100%;
  padding-top: 360px;
}

.img:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 900px;
  height: 100%;
  background-image: url(/public/bg.jpeg);
  background-size: cover;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

.img:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.dowebok.s--signup .img:before {
  -webkit-transform: translate3d(640px, 0, 0);
  transform: translate3d(640px, 0, 0);

}

.img__text {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  padding: 0 20px;
  text-align: center;
  color: #fff;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

.img__text h2 {
  margin-bottom: 10px;
  font-weight: normal;
}

.img__text p {
  font-size: 14px;
  line-height: 1.5;
}

.dowebok.s--signup .img__text.m--up {
  -webkit-transform: translateX(520px);
  transform: translateX(520px);
}

.img__text.m--in {
  -webkit-transform: translateX(-520px);
  transform: translateX(-520px);
}

.dowebok.s--signup .img__text.m--in {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.img__btn {

  overflow: hidden;
  z-index: 2;
  position: relative;
  width: 100px;
  height: 36px;
  margin: 0 auto;
  background: transparent;
  color: #fff;
  text-transform: uppercase;
  font-size: 15px;
  cursor: pointer;
}

.img__btn:after {
  content: "";
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-radius: 30px;

}

.img__btn span {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
}

.img__btn span.m--in {
  -webkit-transform: translateY(-72px);
  transform: translateY(-72px);
}

.dowebok.s--signup .img__btn span.m--in {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.dowebok.s--signup .img__btn span.m--up {
  -webkit-transform: translateY(72px);
  transform: translateY(72px);
}

h2 {
  width: 100%;
  font-size: 26px;
  text-align: center;
}

label {
  display: block;
  width: 260px;
  margin: 25px auto 0;
  text-align: center;
}

label span {
  font-size: 12px;
  color: #909399;
  text-transform: uppercase;
}

.loginInput .el-input__inner {
  display: block;
  width: 100%;
  font-size: 16px;
  text-align: center;
  border-radius: 40px;
  height: 40px;
}

.loginInput {
  border-radius: 40px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}


.forgot-pass {
  margin-top: 15px;
  text-align: center;
  font-size: 12px;
  color: #cfcfcf;
}

.forgot-pass a {
  color: #cfcfcf;
}

.submit {
  margin-top: 40px;
  margin-bottom: 20px;
  background: #166cc1;
  text-transform: uppercase;
}

.fb-btn {
  border: 2px solid #d3dae9;
  color: #8fa1c7;
}

.fb-btn span {
  font-weight: bold;
  color: #455a81;
}

.sign-in {
  transition-timing-function: ease-out;
  margin-top: 10px

}

.dowebok.s--signup .sign-in {
  transition-timing-function: ease-in-out;
  transition-duration: 0.6s;
  -webkit-transform: translate3d(640px, 0, 0);
  transform: translate3d(640px, 0, 0);
}

.sign-up {
  -webkit-transform: translate3d(-900px, 0, 0);
  transform: translate3d(-900px, 0, 0);
}

.dowebok.s--signup .sign-up {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

source {
  /* min-width: 100%;
  min-height: 100%; */
  height: auto;
  width: auto;
}


* {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB W3", "Hiragino Sans GB",
  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
